<template>
    <HomelayoutVue student :menu="menulist">
        <template #header>
            <div class="header">
                <div class="user-avatar">
                    <img :src="PUBLIC_URL + '/head-normal.jpg'" alt="" />
                </div>
                <div class="user-info">
                    <span class="name"
                        ><router-link :to="infoPath">{{
                            store.studentName
                        }}</router-link></span
                    >
                    <span
                        ><router-link :to="infoPath"
                            >学号：{{ store.studentNum }}</router-link
                        ></span
                    >
                    <span>班级：{{ store.className }}</span>
                </div>
                <el-dropdown
                    style="
                        position: absolute;
                        width: 20rem;
                        height: 20rem;
                        right: 0;
                        z-index: 1000;
                    "
                    trigger="click"
                >
                    <img
                        class="config"
                        :src="PUBLIC_URL + '/icon-config.svg'"
                        alt=""
                    />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item
                                @click="toPage('student-personal')"
                                >个人主页</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </template>
        <template #menu>
            <ul class="menu">
                <li v-for="item in menulist">
                    <router-link :to="item.to">
                        <img :src="PUBLIC_URL + item.img" alt="" />
                        <span>{{ item.info }}</span>
                    </router-link>
                </li>
            </ul>
        </template>
        <template #content>
            <div class="content">
                <header>
                    <h3>我的记录</h3>
                    <h5>
                        <router-link to="/student/leavemore"
                            >查看更多>></router-link
                        >
                    </h5>
                </header>
                <ul
                    v-infinite-scroll="load"
                    class="content-list"
                    style="overflow: auto"
                    :infinite-scroll-distance="10"
                    :infinite-scroll-disabled="disabled"
                >
                    <li v-for="i in leaveList" :key="i">
                        <router-link :to="leavePaths[i.leaveType - 1] + i.id">
                            <div class="info">
                                <span v-if="i.leaveType == 1"
                                    >你的请假申请</span
                                >
                                <span v-else-if="i.leaveType == 2"
                                    >你的放行条申请</span
                                >
                                <span v-else-if="i.leaveType == 4"
                                    >你的留宿申请</span
                                >
                                <span>{{ i.createTime }}</span>
                            </div>
                            <span
                                v-if="
                                    i.state === 16 ||
                                    i.state === 22 ||
                                    i.state === 4
                                "
                                class="state"
                                style="border: 1px solid #00cc00"
                            >
                                <span
                                    style="
                                        border: 1px solid #00cc00;
                                        color: #00cc00;
                                    "
                                    >已通过</span
                                >
                            </span>
                            <span
                                v-else-if="i.state === 3"
                                class="state"
                                style="border: 1px solid #f00"
                            >
                                <span
                                    style="border: 1px solid #f00; color: #f00"
                                    >已拒绝</span
                                >
                            </span>
                            <span
                                v-else-if="i.state === 5 || i.state === 1"
                                class="state"
                                style="border: 1px solid #ff6600"
                            >
                                <span
                                    style="
                                        border: 1px solid #ff6600;
                                        color: #ff6600;
                                    "
                                    >待审核</span
                                >
                            </span>
                            <span
                                v-else
                                class="state"
                                style="border: 1px solid rgb(0, 89, 255)"
                            >
                                <span
                                    style="
                                        border: 1px solid rgb(0, 89, 255);
                                        color: rgb(0, 89, 255);
                                    "
                                    >审核中</span
                                >
                            </span>
                        </router-link>
                    </li>
                    <div v-loading="loading" style="margin-top: 25rem"></div>
                    <p v-if="noMore">没有数据了</p>
                </ul>
            </div>
        </template>
    </HomelayoutVue>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { REMOVE_TOKEN } from '../../utils/token';
import HomelayoutVue from '@/component/Homelayout.vue';
import { useStudentStore } from '../../stores/modules/studentStore';
import { useRouter } from 'vue-router';
import { reqLeaveList } from '@/api/student';

const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;

const router = useRouter();
const infoPath = ref('/student/info');
const leavePaths = ref([
    '/student/leave/',
    '/student/pass/',
    '',
    '/student/stay/',
    '/student/leave/',
    '/student/leave/'
]);

const menulist = ref([
    {
        img: '/icon-menu01.svg',
        info: '请假申请',
        to: '/student/application/leave'
    },
    {
        img: '/icon-menu04.svg',
        info: '放行条申请',
        to: '/student/application/pass'
    },
    {
        img: '/icon-menu05.svg',
        info: '留宿申请',
        to: '/student/application/stay'
    },
    {
        img: '/icon-menu03.svg',
        info: '通知公告',
        to: '/student/bulletin'
    }
]);

const store = useStudentStore();
const loading = ref(false);
const noMore = ref(false);
const leaveList = ref([]);
const disabled = computed(() => loading.value || noMore.value);
let count = 0;
const load = () => {
    getLeaveList();
};

const getLeaveList = async () => {
    loading.value = true;
    count++;
    try {
        const res = await reqLeaveList(count);
        if (res.status === '200') {
            if (res.dataList) {
                leaveList.value.push(...res.dataList);
                loading.value = false;
                noMore.value = res.dataList.length <= 3;
            } else {
                noMore.value = true;
            }
        }
    } catch (err) {
        console.log(err);
    }
    loading.value = false;
};

onMounted(async () => {
    await getLeaveList();
    await getLeaveList();
});

const logout = () => {
    store.logout();
    REMOVE_TOKEN();
    router.push({ name: 'login' });
};

const toPage = pathName => {
    router.push({ name: pathName });
};
</script>

<style scoped>
a {
    text-decoration: none;
    color: #666;
    -webkit-tap-highlight-color: transparent;
}

.header {
    position: relative;
    display: flex;
    width: 100%;
    height: 60rem;
}

.user-avatar img {
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
}

.user-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 15rem;
    color: #fff;
    height: 65rem;
    font-size: 12rem;
}

.user-info span {
    padding: 2rem 0;
}

.user-info .name {
    font-size: 16rem;
}

.user-info a {
    color: #fff;
}

.header > a {
    position: absolute;
    width: 20rem;
    height: 20rem;
    right: 0;
    z-index: 1000;
}

.header .config {
    position: absolute;
    width: 20rem;
    height: 20rem;
    right: 0;
    z-index: 1000;
}

.menu {
    display: flex;
    flex-flow: wrap;
    height: 100%;
}

.menu li {
    height: 60rem;
    width: 33%;
}

.menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888878;
    font-size: 10rem;
    height: 100rem;
}

.menu li img {
    width: 30rem;
    height: 30rem;
}

.menu span {
    margin-top: 6rem;
}

.content {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
}

.content header {
    display: flex;
    justify-content: space-between;
    font-size: 12rem;
    align-items: end;
    color: #888878;
}

.content header h3 {
    font-size: 15rem;
    color: #333;
}

.content-list {
    margin-top: 10rem;
    position: relative;
    width: 100%;
    height: 90%;
    overflow: auto;
    align-self: start;
}

.content-list > span {
    padding-top: 5rem;
    text-align: center;
    color: #666;
    font-size: 10rem;
}

.content-list li {
    margin-top: 10rem;
    padding: 5rem;
    width: 100%;
    height: 62rem;
    background-color: #fff;
    border-radius: 5rem;
    border: 1rem solid #ddd;
}

.content-list li a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: #333;
    font-size: 12rem;
}

.content-list .info {
    margin-left: 10rem;
    display: flex;
    flex-direction: column;
    width: 130rem;
    height: 50rem;
    justify-content: space-around;
}

.content-list .state {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50rem;
    height: 50rem;
    border-radius: 50%;
}

.content-list .state span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    transform: rotate(-30deg);
}

.content-list p {
    text-align: center;
    font-size: 12rem;
    color: #666;
    height: 20rem;
}
</style>
